<template>
	<view>
		<view class="flex_sb h100 mb10 plr30 b-warning cf" v-show="type == 2 && depositInfo.deposit_status == 0">
			<text class="ft26">
				请先支付
				<text class="plr10 ft32">电池押金</text>
				后，再购买租车套餐
			</text>
			<view class="h50 lh50 plr24 bf warning border-r3" @click="confDeposit(3, getBalance, true)">立即支付</view>
		</view>
		<view class="flex_sb h100 plr30 b-green cf" v-show="type == 2 && depositInfo.car_deposit_status == 0">
			<text class="ft26">
				请先支付
				<text class="plr10 ft32">租车押金</text>
				后，再购买租车套餐
			</text>
			<view class="h50 lh50 plr24 bf green border-r3" @click="confDeposit(2, getBalance)">立即支付</view>
		</view>

		<view class="p30">
			<view class="mb30 p24 border-r1 bf shadow">
				<view class="flex h60" v-if="type == 2">
					<text class="flex1">当前账户余额：</text>
					<text class="plr20 primary" @click="routerLink({ path: '/pages/user/wallet/recharge' })">立即充值</text>
					<text class="pl20 warning">{{ depositInfo.balance }}元</text>
				</view>
				<view class="flex h60">
					<text class="flex1">电池({{ btType }}V)押金：</text>
					<!-- <text class="plr20 warning" @click="routerLink({path: '/pages/user/wallet/recharge'})">立即支付</text> -->
					<text class="pl20">{{ info.batteryDeposit || '0' }} 元</text>
					<text class="plr10 primary" v-show="type == 2 && depositInfo.deposit_status == 1"
						@click="routerLink({ path: '/pages/user/wallet/index' })">点击查看</text>
				</view>
				<view class="flex h60">
					<text class="flex1">车辆押金：</text>
					<text class="pl20">{{ info.carDeposit || '0' }} 元</text>
					<text class="plr10 primary" v-show="type == 2 && depositInfo.car_deposit_status == 1"
						@click="routerLink({ path: '/pages/user/wallet/index' })">点击查看</text>
				</view>
				<view class="lh40 ft26 c6">购买租车套餐需要先支付电池押金和车辆押金，套餐结束后您可以提现押金到您的微信余额中</view>
			</view>

			<view class="p24 border-r1 bf shadow" style="min-height: calc(100vh - 480upx);">
				<view class="h60">
					<text v-if="type == 2">选择</text>
					租车套餐
				</view>
				<!-- 租车套餐 start -->
				<view class="mb50">
					<block v-for="item in mealList" :key="item.mealRentId">
						<view class="flex_a h80 mb20 ft26" @click="chooseMenu(item)">
							<view class="flex_aj w170 ph100 mr24 border-r1"
								:class="mealId == item.mealRentId ? 'bd-primary primary' : 'bd'">{{ item.days }}天</view>
							<view class="flex1 flex_aj ph100 border-r1"
								:class="mealId == item.mealRentId ? 'bd-primary primary' : 'bd'">
								换电次数:{{ item.num }}
								<text class="pl20">¥ {{ item.price }}</text>
							</view>
						</view>
					</block>
				</view>
				<!-- 租车套餐 end -->
				<view v-if="type == 2">
					<view class="plr30 mb10">
						<u-button type="primary" shape="circle" :disabled="!isBuy" @click="confBuy">购买套餐</u-button>
					</view>
					<view class="flex_aj h60">
						<view class="flex_a" @click="checkboxChange">
							<view class="checkbox_item flex_aj" :class="isAgree ? 'checkbox_acti' : ''">
								<u-icon name="checkbox-mark" color="#fff" size="24"></u-icon>
							</view>
							<text class="pl10">我已阅读并同意</text>
						</view>
						<navigator :url="'/pages/user/rentCar/protocol?deviceNo=' + deviceNo" hover-class="none"
							class="primary">《租赁车辆套餐协议》</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		qs
	} from '@/utils/tools'
	import payDeposit from '../mixins/payDeposit.js'
	import {
		getBalance,
		getListMealRentByDeviceNo,
		chargeDepositMakeOrder,
		purchaseMealOrder
	} from '@/api/user.js'
	export default {
		name: 'rentCarPackage',
		mixins: [payDeposit],
		data() {
			return {
				type: 1, // 1 查看租车套餐   2 购买租车套餐
				deviceNo: '', // 设备编号
				mealId: 1, // 选中的套餐id
				selectMeal: {}, // 选中的套餐
				isAgree: true,
				mealList: [],
				depositInfo: {}, //押金信息
				info: {},
				btType: '' // 车辆电池型号
			}
		},
		onLoad(e) {
			this.type = e.type || 2
			this.deviceNo = e.deviceNo || '112222'
		},
		onShow() {
			this.init()
		},
		computed: {
			isBuy() {
				if (this.depositInfo.deposit_status == 1 && this.depositInfo.car_deposit_status == 1) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			async init() {
				await this.getListMealRentByDeviceNo()
				if (this.type == 2) {
					this.getBalance()
				}
			},
			// 获取租车套餐
			async getListMealRentByDeviceNo() {
				const res = await getListMealRentByDeviceNo({
					deviceNo: this.deviceNo
				})
				this.info = res.data
				const mealList = res.data.mealList
				this.mealList = mealList
				this.btType = res.data.btType
				if (this.type == 2 && mealList[0]) {
					this.mealId = mealList[0].mealRentId
					this.selectMeal = mealList[0]
				}
			},
			// 获取押金信息
			async getBalance() {
				const res = await getBalance()
				const depositInfo = res.data
				this.depositInfo = depositInfo
				console.log(this.info.btType != depositInfo.type_name)
				if (depositInfo.deposit_status == 1 && this.info.btType != depositInfo.type_name) {
					this.confirm({
						content: '您购买的电池（' +
							depositInfo.type_name +
							'V）押金,与该电动车电池型号（' +
							this.info.btType +
							'V）不一致,请选择其他电动车，或者购买' +
							this.info.btType +
							'V电池押金',
						showCancel: false
					}).then(res => {
						this.back()
					})
				}
			},
			// 购买套餐
			async confBuy() {
				if (parseFloat(this.depositInfo.balance) < parseFloat(this.selectMeal.price)) {
					return this.confirm({
						title: '可用余额不足',
						content: '您的余额不足，请先充值',
						confirmText: '去充值'
					}).then(res => {
						if (res.confirm) {
							this.routerLink({
								path: '/pages/user/wallet/recharge'
							})
						}
					})
				}
				if (!this.isAgree) {
					return this.toast('请勾选并同意《租赁电池套餐协议》')
				}

				const res = await purchaseMealOrder({
					deviceNo: this.deviceNo,
					mealId: this.mealId
				})
				if (res.code == 1001 || res.code == 2) {
					this.confirm({
						content: res.msg,
						confirmText: '查看订单'
					}).then(res => {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/user/myOrder/rentCarDetail'
							})
						}
					})
				} else if (res.code == 1003) {
					this.confirm({
						content: '您的余额不足，请先充值',
						confirmText: '去充值'
					}).then(res => {
						if (res.confirm) {
							this.routerLink({
								path: '/pages/user/wallet/recharge'
							})
						}
					})
				} else if (res.code == 1004 || res.code == 1005 || res.code == 6) {
					this.confirm({
						content: res.msg
					})
				} else if (res.code == 200) {
					this.toast('购买成功')
					const info = res.data
					const query = {
						oprName: info.oprName,
						ctime: info.ctime,
						mealMoney: info.mealMoney,
						days: info.days,
						mealTotalNum: info.mealTotalNum,
						mealTime: info.mealTime,
					}

					uni.redirectTo(
						qs(
							Object.assign({
									url: '/pages/user/rentCar/success'
								},
								query
							)
						)
					)

				} else {
					this.toast(res.msg)
				}
			},

			// 选择套餐
			chooseMenu(e) {
				if (this.type == 1) {
					return false
				}
				this.selectMeal = e
				this.mealId = e.mealRentId
			},
			// 同意协议
			checkboxChange() {
				this.isAgree = !this.isAgree
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox_item {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}

	.checkbox_acti {
		background-color: $primary;
		border: 1px solid $primary;
	}
</style>
